<template>
  <div>

	
	<myheader :totalcount="this.totalcount()" :totalprice="this.totalprice()" />

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>

					<p>颜色:{{ color }}</p>
					<p>号码:{{ size }}</p>
					<p>季节:{{ season }}</p>



					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="javascript:void(0)" @click="add_cart" class="btn btn-full-width btn-lg btn-outline-primary">加入购物车</a></div>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>


	<section class="products text-center">
		<div class="container">
			

			<textarea v-model="content">  </textarea>

			<br /><br />

			<Button  color="blue" @click="comment" >开始评论</Button>


			<comments :commentlist="this.commentlist" :myuser="this.myuser"></comments>


			<!-- <ul>
				
				<li v-for="item in commentlist">

					{{ item.uid | myfilter }}:{{ item.content }}
					
				</li>


			</ul>
 -->

		</div>
	</section>

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import comments from './comments.vue';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //商品id
      id:'',
      name:'',
      price:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      img:'',
      src:'',
      //评论内容
      content:'',
      //评论列表容器
      commentlist:[],
      //用户信息字典
      myuser:{},
      //购物车变量
      cartlist:[]
    }
  },
  //自定义过滤器
  filters:{

  		//自定义方法
  		myfilter:function(value){

  				//通过key(用户id)取用户名
  				return window.that.myuser[value];

  		}

  },
  //注册组件标签
  components:{

  		myheader,
  		comments

  },
  mounted:function(){

  	window.that = this;

  	//接收商品id
  	var id = this.$route.query.id;


  	this.id = id;


  	//调用用户列表
  	this.get_user();


  	//调用接口
  	this.getdata();

  	//调用评论接口
  	this.get_comment();

  	//初始化购物车
  	this.init_cart();

   
  
},
  methods:{

  	//计算价格
  	totalprice:function(){

  		var total = 0;

  		for(let i=0,l=this.cartlist.length;i<l;i++){

  				total += (this.cartlist[i].num * this.cartlist[i].price);
  		}

  		return total;

  	},

  	//计算购物车总数
  	totalcount:function(){

  		var total = 0;

  		for(let i=0,l=this.cartlist.length;i<l;i++){

  				total += this.cartlist[i].num;
  		}

  		return total;

  	},
  	//初始化购物车逻辑
  	init_cart:function(){

  		//将localstorage的数据赋给cartlist
  		var cart = localStorage.getItem("cart");
  		if(cart){
  		this.cartlist = JSON.parse(cart);
  		}


  	},
  	//加入购物车逻辑
  	add_cart:function(){
  		var find = 0;
  		//遍历购物车
  		for(let i=0,l=this.cartlist.length;i<l;i++){

  			//如果找到了
  			if(this.id == this.cartlist[i]['id']){
  					//将该商品的数量+1
  					this.cartlist[i]['num']++;
  					find = 1;
  					break;
  			}

  		}
  		//如果没找到
  		if(find==0){
  			//将该商品放入购物车列表
  			this.cartlist.push({name:this.name,id:this.id,price:this.price,num:1});
  		}

  		console.log(this.cartlist);

  		//存入localstorage
  		localStorage.setItem("cart",JSON.stringify(this.cartlist));

  	},
  	//调用所有用户列表
  	get_user:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/userlist/').then((result) =>{

              console.log(result);      

              //动态赋值

              for(let i=0,l=result.data.length;i<l;i++){

              		this.myuser[result.data[i].id] = result.data[i].username;

              }

              console.log(this.myuser);

      });

  	},
  	//调用评论列表
  	get_comment:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/commentlist/',{params:{id:this.id}}).then((result) =>{

              console.log(result);   

              this.commentlist = result.data;     

      });



  	},
  	//评论方法
  	comment:function(){


  		if(this.content == ""){

  			this.$Message("评论内容不能为空"); 
  			return false;

  		}


  		//发送请求
      this.axios.post('http://localhost:8000/insertcomment/',this.qs.stringify({content:this.content,uid:localStorage.getItem("uid"),gid:this.id})).then((result) =>{

              console.log(result); 

              this.$Message(result.data.message);  


              if(result.data.code == 200){
              //将评论内容和作者实时填充到评论容器中
              this.commentlist.unshift({"uid":localStorage.getItem("uid"),"content":this.content});


              this.content = ''; 
              }         

      });



  	},
  	//商品信息接口
  	getdata:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodinfo/',{params:{id:this.id}}).then((result) =>{

              console.log(result);

              this.name = result.data.name;
              this.desc = result.data.desc;
              this.price = result.data.price;
              this.img = result.data.img;

              var parms = result.data.parms;

              //转换类型
              parms = JSON.parse(parms);

              this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              this.src = 'http://localhost:8000/static/upload/'+result.data.img;

              console.log(parms);

              

      });



  	}

     
  }
}


</script>
 
<style>



</style>